<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天勤考核</title>
    <link href="./css/index.css" rel="stylesheet" type="text/css">
    <script src="./js/banner.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>

<body>
    <!-- top-bar -->
    <div id="top-bar">
        <div id="logo">
            <p>LOGO</p>
        </div>
        <div id="login">
            <p>Log Out</p>
        </div>
    </div>
    <!-- //headerd -->
    <div class="layout">
        <div id="header">
            <div id="title">
                <h1>Audience Overview</h1>
                <p>Roseville,CA</p>
            </div>
            <div id="navigation">
                <div id="navigation">
                    <ul>
                        <li><a class="on" href="#">DASHBOARD</a></li>
                        <li><a href="#">PROJECTS</a></li>
                        <li><a href="#">CALENDAR</a></li>
                        <li><a href="#">MAILBOX</a></li>
                        <li><a href="#">SETTINGS</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- //轮播图 -->
    <div class="layout" style="display: flex;">
        <div class="lunbo" style="margin-right: 130px;">
            <div class="content">
                <ul id="item">
                    <li class="item">
                        <a href="#"><img src="img/001.jpg"></a>
                    </li>
                    <li class="item">
                        <a href="#"><img src="img/002.jpg"></a>
                    </li>
                    <li class="item">
                        <a href="#"><img src="img/003.jpg"></a>
                    </li>
                    <li class="item">
                        <a href="#"><img src="img/004.jpg"></a>
                    </li>
                    <li class="item">
                        <a href="#"><img src="img/005.jpg"></a>
                    </li>
                </ul>
                <div id="btn-left">
                    <</div>
                        <div id="btn-right">></div>
                        <ul id="circle">

                            <li class="circle"></li>
                            <li class="circle"></li>
                            <li class="circle"></li>
                            <li class="circle"></li>
                            <li class="circle"></li>
                        </ul>
                </div>
            </div>
            <div id="question">
                <div id="little_title" style="display:flex ;">
                    <div id="question_title" style="margin-right: 230px;">
                        <h2>Support Requests</h2>
                    </div>
                    <div id="input">
                        <button>View All</button>
                    </div>
                </div>
                <div id="view">
                    <ul id="time">
                        <li>
                            <h3>TIME</h3>
                        </li>
                        <li>9:45pm</li>
                        <li>9:45pm</li>
                    </ul>
                    <ul id="username">
                        <li>
                            <h3>USER NAME</h3>
                        </li>
                        <li>info@design.com</li>
                        <li>info@design.com</li>
                    </ul>
                    <ul id="status">
                        <li>
                            <h3>STATUS</h3>
                        </li>
                        <li><button>Solved</button></li>
                        <li><button>Solved</button></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- question -->
    </div>
    <!-- //echarts数据可视化图表 -->
    <div class="layout">
        <div id="echarts">
            <div class="layout">
                <div id="chart">
                    <div id="main" style="width: 100%;height:380px;"></div>
                    <script>
                        var chartDom = document.getElementById('main');
                        var myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            title: {
                                text: '曲线图数据展示',
                                left: 'center'
                            },
                            xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: [150, 230, 224, 218, 135, 147, 260],
                                type: 'line'
                            }]
                        };

                        option && myChart.setOption(option);
                    </script>
                </div>
                <div id="pie_chart">
                    <div id="pie" style="width: 600px;height:380px;"></div>
                    <script>
                        var chartDom = document.getElementById('pie');
                        var myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            title: {
                                text: '饼状图数据展示',
                                subtext: 'Fake Data',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [{
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: [{
                                    value: 1048,
                                    name: 'Search Engine'
                                }, {
                                    value: 735,
                                    name: 'Direct'
                                }, {
                                    value: 580,
                                    name: 'Email'
                                }, {
                                    value: 484,
                                    name: 'Union Ads'
                                }, {
                                    value: 300,
                                    name: 'Video Ads'
                                }],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };

                        option && myChart.setOption(option);
                    </script>
                </div>
                <div id="bar_chart">
                    <div id="bar" style="width: 400px;height:380px;"></div>
                    <script>
                        var chartDom = document.getElementById('bar');
                        var myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            title: {
                                text: '柱状数据展示',
                                left: 'center'
                            },
                            xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: [120, 200, 150, 80, 70, 110, 130],
                                type: 'bar'
                            }]
                        };

                        option && myChart.setOption(option);
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!-- //footer -->
    <div id="footer">
        <div id="logo_footer">
            <p>Log Out</p>
        </div>
        <div id="information">
            <ul>
                <li>
                    <a class="on" href="#">
                        <p>NEW</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>CHANNELS</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>OVERVIEW</p>
                </li>
                <li>
                    <a href="#">
                        <p>TIMELINE</p>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">
                        <P>NEW</P>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>CHANNELS</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>OVERVIEW</p>
                </li>
                <li>
                    <a href="#">
                        <p>TIMELINE</p>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">
                        <P>NEW</P>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>CHANNELS</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>OVERVIEW</p>
                </li>
                <li>
                    <a href="#">
                        <p>TIMELINE</p>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">
                        <P>NEW</P>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>CHANNELS</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>OVERVIEW</p>
                </li>
                <li>
                    <a href="#">
                        <p>TIMELINE</p>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">
                        <P>NEW</P>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>CHANNELS</p>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</body>

</html>